<template>
    <div class="phone-container">
        <div class="phone-frame">
            <div class="volume-buttons">
                <div class="volume-up"></div>
                <div class="volume-down"></div>
            </div>
            <div class="power-button"></div>
            <div class="mute-switch"></div>
            <div class="phone-screen">
                <div class="order-detail-container">
                    <!-- 顶部导航栏 -->
                    <van-nav-bar title="开单详情" left-arrow fixed placeholder class="custom-nav" />

                    <!-- 支付成功提示 -->
                    <div class="pay-success-tip">
                        <van-icon name="success" size="32" color="#13c2c2" />
                        <span class="pay-success-text">已支付</span>
                    </div>
                    <div class="pay-success-desc">
                        您已缴费成功，如需打印发票请联系医院工作人员，目前药品暂不支持快递配送，请到院门诊药房6号便民窗口取药
                    </div>

                    <!-- 开单信息 -->
                    <div class="section info-section">
                        <div class="section-title">开单信息</div>
                        <div class="info-row"><span>申请医院</span><span>四川省保健院北苑</span></div>
                        <div class="info-row"><span>就诊患者</span><span>王小柯</span></div>
                        <div class="info-row"><span>登记卡号</span><span>201500010</span></div>
                        <div class="info-row"><span>开单金额</span><span>￥201.00</span></div>
                        <div class="info-row"><span>申请时间</span><span>2020-01-01 10:30:20</span></div>
                    </div>

                    <!-- 开单项目 -->
                    <div class="section items-section">
                        <div class="section-title">开单项目</div>
                        <div class="item-list">
                            <div class="item-row" v-for="item in items" :key="item.id">
                                <div class="item-main">
                                    <span v-if="item.type === 'medicine'" class="tag tag-medicine">药</span>
                                    <span v-if="item.type === 'examination'" class="tag tag-exam">查</span>
                                    <span v-if="item.type === 'test'" class="tag tag-test">检</span>
                                    <span class="item-name">{{ item.name }}</span>
                                    <span class="item-price">￥{{ item.price }}</span>
                                </div>
                                <div class="item-detail">
                                    <span class="item-qty">数量：{{ item.quantity }}{{ item.unit }}</span>
                                    <span v-if="item.type === 'medicine'" class="item-labels">
                                        <span class="label label-rx">处方药</span>
                                        <span v-if="item.limit" class="label label-limit">限购{{ item.limit }}{{ item.unit
                                        }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 订单信息 -->
                    <div class="section order-section">
                        <div class="section-title">订单信息</div>
                        <div class="info-row"><span>订单号</span><span>2021010156256894 <span
                                    class="copy-btn">复制</span></span></div>
                        <div class="info-row"><span>订单流水号</span><span>400012021010156256894</span></div>
                        <div class="info-row"><span>订单金额</span><span>￥201.00</span></div>
                        <div class="info-row"><span>订单状态</span><span>已支付</span></div>
                        <div class="info-row"><span>支付方式</span><span>微信支付</span></div>
                        <div class="info-row"><span>下单时间</span><span>2020-03-01 10:23:36</span></div>
                        <div class="info-row"><span>支付时间</span><span>2020-03-01 10:25:10</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const items = [
    { id: 1, name: '新冠预防中药（正常人群）', price: 11.80, quantity: 1, unit: '剂', type: 'medicine', limit: 5 },
    { id: 2, name: '云南白药胶囊 0.5g*20片', price: 10.08, quantity: 1, unit: '盒', type: 'medicine' },
    { id: 3, name: '动态心电图', price: 150.00, quantity: 1, unit: '次', type: 'examination' },
    { id: 4, name: '血常规', price: 29.12, quantity: 1, unit: '次', type: 'test' }
]
</script>

<style scoped>
.phone-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.phone-frame {
    position: relative;
    width: 375px;
    height: 812px;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 8px;
    box-shadow: 0 0 0 2px #2a2a2a, 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #3a3a3a;
}

.volume-buttons {
    position: absolute;
    left: -2px;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.volume-up,
.volume-down {
    width: 4px;
    height: 30px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.power-button {
    position: absolute;
    right: -2px;
    top: 120px;
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mute-switch {
    position: absolute;
    left: -2px;
    top: 200px;
    width: 4px;
    height: 25px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.order-detail-container {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 40px;
}

.custom-nav {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pay-success-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    color: #13c2c2;
    margin: 24px 0 8px 24px;
}

.pay-success-text {
    color: #13c2c2;
    font-size: 20px;
    font-weight: 600;
}

.pay-success-desc {
    color: #888;
    font-size: 13px;
    margin: 0 24px 16px 24px;
    line-height: 1.6;
}

.section {
    background: #fff;
    border-radius: 12px;
    margin: 16px 16px 0 16px;
    padding: 16px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #333;
    margin-bottom: 8px;
}

.copy-btn {
    color: #4285f4;
    font-size: 13px;
    margin-left: 6px;
    cursor: pointer;
}

.items-section {
    margin-top: 16px;
}

.item-list {
    margin-bottom: 8px;
}

.item-row {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0;
}

.item-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag {
    display: inline-block;
    font-size: 12px;
    border-radius: 4px;
    padding: 0 6px;
    margin-right: 4px;
    color: #fff;
}

.tag-medicine {
    background: #4fc3f7;
}

.tag-exam {
    background: #ff7043;
}

.tag-test {
    background: #e74c3c;
}

.item-name {
    font-size: 15px;
    color: #333;
}

.item-price {
    color: #e74c3c;
    font-size: 15px;
    font-weight: 500;
    margin-left: auto;
}

.item-detail {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-qty {
    color: #666;
}

.item-labels {
    margin-left: 8px;
}

.label {
    display: inline-block;
    font-size: 12px;
    border-radius: 4px;
    padding: 0 6px;
    margin-right: 4px;
}

.label-rx {
    background: #e3f2fd;
    color: #4285f4;
}

.label-limit {
    background: #fdecea;
    color: #e74c3c;
}

.order-section {
    margin-top: 16px;
}

@media (max-width: 420px) {
    .phone-frame {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        padding: 0;
    }

    .phone-screen {
        border-radius: 0;
    }

    .volume-buttons,
    .power-button,
    .mute-switch {
        display: none;
    }
}
</style>